<template>
  <div :class="{'right-panel-active':isSignUpActive}" class="container" id="container">
    <div class="form-container sign-up-container">
      <form action="">
        <h2>创建账户</h2>
        <div class="social-container">
          <a href="#" class="social">
            <i class="iconfont icon-weixin"></i>
          </a>
          <a href="#" class="social">
            <i class="iconfont icon-zhifubaozhifu"></i>
          </a>
          <a href="#" class="social">
            <i class="iconfont icon-weibo "></i>
          </a>
        </div>
        <span>或使用电子邮箱注册</span>
        <input type="text" placeholder="用户名" />
        <input type="email" placeholder="邮箱" />
        <input type="password" placeholder="密码" />
        <button>注册</button>
      </form>
    </div>

    <div class="form-container sign-in-container">
      <form action="">
        <h2>登录</h2>
        <div class="social-container">
          <a href="#" class="social">
            <i class="iconfont icon-weixin"></i>
          </a>
          <a href="#" class="social">
            <i class="iconfont icon-zhifubaozhifu"></i>
          </a>
          <a href="#" class="social">
            <i class="iconfont icon-weibo"></i>
          </a>
        </div>
        <span>或使用邮箱登录</span>
        <input type="email" placeholder="邮箱" />
        <input type="password" placeholder="密码" />
        <a href="#">忘记密码?</a>
        <button>登录</button>
      </form>
    </div>
    <div class="overlay-container">
      <div class="overlay">
        <div class="overlay-panel overlay-left">
          <h2>欢迎回来！</h2>
          <p>
            要访问你的帐户，保持我们连线。
          </p>
          <button class="ghost" @click="onLoginClick"  id="onLoginClick">登录</button>
        </div>
        <div class="overlay-panel overlay-right">
          <h2>你好，朋友！</h2>
          <p>
            输入你的个人详细信息开始你的旅行！
          </p>
          <button class="ghost" @click="onRegClick" id="signUp">创建账户</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const isSignUpActive = ref(false);
function onLoginClick() {
  console.log('onLoginClick');
  isSignUpActive.value = false;
}
  function onRegClick() {
    isSignUpActive.value = true;
  }

</script>

<style>
@import './index.css';
@import url('@/assets/fontIcon/iconfont.css');
</style>